/* eslint-disable no-unused-expressions */
/* eslint-disable no-labels */
/* eslint-disable no-undef */
/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-12 09:28:28
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-23 10:51:12
 * @FilePath: \crm_customer\src\components\WorkOrder\WorkContent.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React,{ useState } from 'react'

import {inject,observer} from 'mobx-react'
import {  Table,Button,Modal } from 'antd';
import CheckworkOrder from './CheckworkOrder';  
import DisposeWorkorder from './DisposeWorkorder';
import RecordworkOrder from './RecordworkOrder';
import UpdateWorkOrderList from './UpdateWorkOrderList'


  const App = (props) =>{
    // useEffect(()=>{
    //   props.workOrderStore.findAllWorkOrderList()
    //   })
    
    let data = props.workOrderStore.WorkOrderHeadList
    const columns = [
      {
        title: 'Id',
        dataIndex: 'work_order_id',
        key: 'work_order_id',
      },
      {
        title: '工单类型',
        dataIndex: 'work_order_type',
        key: 'work_order_type',
      },
      {
        title: '客户名称',
        dataIndex: 'customer_name',
        key: 'customer_name',
        render: (text,record) => <a onClick={()=>{checkWorkOrderList(record.work_order_id)}} >{text}</a>,
      },
    
      {
        title: '客户联系人',
        dataIndex: 'contact_name',
        key: 'contact_name',
      },
      {
        title: '处理状态',
        dataIndex: 'processing_status',
        key: 'processing_status',
        render:(text,record)=> <button onClick={()=>{DisposeWorkorderList(record.work_order_id)}}>{text===0?'未处理':text===1?'处理中':text===2?'已完成':''}</button>
      },
      {
        title: '起始时间',
        
        dataIndex: 'start_time',
        key: 'start_time',
      },
      {
        title: '结束时间',
        dataIndex: 'end_time',
        key: 'end_time',
      },
      {
        title: '交通方式',
        dataIndex: 'traffic_mode',
        key: 'traffic_mode',
      },
      {
        title: '差旅联系人',
        dataIndex: 'travel_contact',
        key: 'travel_contact',
      },
      {
        title: '工作描述',
        dataIndex: 'job_describe',
        key: 'job_describe',
      },
      {
        title: '指派人员',
        dataIndex: 'assigned_personnel',
        key: 'assigned_personnel',
      },
      {
        title: '工作记录',
        dataIndex: 'job_record',
        key: 'job_record',
        render:(text,record)=> <button onClick={()=>{RecordworkOrderList(record.work_order_id)}}>{text===0?'查看':text===1?'记录':text===2?'反馈':''}</button>
      },
      {
        title: '发起人',
        dataIndex: 'user_name',
        key: 'user_name',
      },
      {
        title: '发起时间',
        dataIndex: 'initiate_time',
        key: 'initiate_time',
      },
      {
        title: '操作',
        key: 'operaion',
        render: (text,record) => {
          return (<div>
            <Button onClick={()=>{updeleteBtn(record.work_order_id)}}>编辑</Button>
            <Button onClick={()=>{deleteBtn(record.work_order_id)}}>删除</Button>
            </div>
          )
        }
      },
    ];
    const [visible, setVisible] = useState(false);
    const [visible1, setVisible1] = useState(false);
    const [visible2, setVisible2] = useState(false);
    const [visible3, setVisible3] = useState(false);
    //点击客户名称
    const checkWorkOrderList=(work_order_id)=>{
        setVisible(true)
        props.workOrderStore.findWorkOrderById(work_order_id)
     }
     //点击处理状态 
     const DisposeWorkorderList=(work_order_id)=>{
        setVisible1(true)
        props.workOrderStore.findWorkOrderById(work_order_id)
     }
     //点击工作记录
     const RecordworkOrderList=(work_order_id)=>{
        setVisible2(true)
        props.workOrderStore.findWorkRecordById(work_order_id)
     }
     //点击修改工单
     const updeleteBtn=(work_order_id)=>{
      setVisible3(true)
      props.workOrderStore.findWorkOrderById(work_order_id)

     }
     //点击删除按钮
 
    const deleteBtn=(work_order_id)=>{
      console.log(work_order_id,'当前这一行ID');
      props.workOrderStore.deleteWorkOrder(work_order_id)
      console.log(props,'qwe');
    }
    
     const showModel=()=>{
      setVisible(false)
     }
     const offModel=()=>{
      setVisible(false)
     }
     
     const showModel2=()=>{
      setVisible1(false)
      
     }
     const showModel3=()=>{
      setVisible2(false)
     }
     const showModel4=()=>{
      setVisible3(false)
     }
     const offModel2=()=>{
      setVisible1(false)
     }
     const offModel3=()=>{
      setVisible2(false)
     }
     const offModel4=()=>{
      setVisible3(false)
     }
     

   return(  
    <>
    <Table rowKey='work_order_id' columns={columns} dataSource={data}  pagination={false} />

    {/*模态框*/}
    <Modal
    title="客户名称工单查看"
    centered
    visible={visible}
    onOk={showModel}
    onCancel={offModel}
    width={1200}
    >
    <CheckworkOrder/>
  </Modal>

  <Modal
  title="处理状态工单查看"
  centered
  visible={visible1}
  onOk={showModel2}
  onCancel={offModel2}
  width={1200}
  >
  <DisposeWorkorder/>
</Modal>

<Modal
title="工作记录工单查看"
centered
visible={visible2}
onOk={showModel3}
onCancel={offModel3}
width={1200}
>
<RecordworkOrder/>
</Modal>

<Modal
title="修改工单"
centered
visible={visible3}
onOk={showModel4}
onCancel={offModel4}
width={1200}
>
<UpdateWorkOrderList/>
</Modal>

    </>
   

   )
  } 
  export default inject('workOrderStore')(observer(App));
